<template>
  <div class="rank-wrapper container-channel">
      <div class="rank-tab" ref="tab">
          <div class="rank-tab-header">
                <div class="inner">
                    <div class="tab-header-item"
                        :class="{'active': active == 'share'}"
                        @click.stop="changeTab('share')"
                    >分享榜</div>
                    <div class="tab-header-item"
                        :class="{'active': active == 'gratuity'}"
                        @click.stop="changeTab('gratuity')"
                    >打赏榜</div>
                </div>
          </div>
          <div class="rank-tab-body" ref="tabBody">
              <div class="rank-track" :style="{transform: 'translate3d('+trackStyleLeft+',0,0)'}">
                <div class="tab-body-item">
                    <div class="rank-list-wrapper">
                        <van-list
                            v-model="gratuityLoading"
                            :finished="gratuityFinished"
                            class="rank-list"
                            finished-text="没有更多了"
                            @load="onGratuityLoad"
                        >
                            <ul>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order"><i class="rank-1"></i></span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order"><i class="rank-2"></i></span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order"><i class="rank-3"></i></span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order">4</span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order">5</span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order">6</span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请<span class="color-orange">18</span>人</p>
                                    <span class="order">7</span>
                                </li>
                            </ul>
                        </van-list>
                    </div>
                </div>
                <div class="tab-body-item">
                    <div class="rank-list-wrapper">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            class="rank-list"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <ul class="rank-list">
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order"><i class="rank-1"></i></span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order"><i class="rank-2"></i></span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order"><i class="rank-3"></i></span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order">4</span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order">5</span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>                                    
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order">6</span>
                                </li>
                                <li class="rank-media media">
                                    <div class="media-object"><img src="../img/avtar_list.png" class="img-avtar" alt=""></div>
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                    <span class="order">7</span>
                                </li>
                            </ul>
                        </van-list>
                    </div>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            active: 'share',
            loading: false,
            finished: false,
            gratuityLoading: false,
            gratuityFinished: false,
        };
    },
    computed: {
        trackStyleLeft(){
            return this.active == 'share' ? 0 : '-50%';
        }
    },
    methods: {
        changeTab(tabName){
            this.active = tabName;
        },
        onLoad(){},
        onGratuityLoad(){
            
        }
    },
    created() {},
    mounted() {
        this.$nextTick(()=>{
            let tabHeight = this.$refs.tab.offsetHeight;
            let headerHeight = this.$refs.tab.querySelector(".rank-tab-header").offsetHeight;
            this.$refs.tabBody.style.height = tabHeight - headerHeight + 'px';
        });
    }
};
</script>
<style lang="scss" scoped>
.rank-wrapper {
    height: 100%;
    overflow: hidden;
    .rank-track {
        display: flex;
        width: 200%;
        height: 100%;
        transition: all ease .3s;
    }

    .tab-body-item {
        flex: 1;
        height: 100%;
    }

    .rank-tab {
        height: 100%;
        overflow: hidden;
    }
    .rank-tab-header {
        padding: 30px 0;
    
        > div {
            display: flex;
            width: 480px; 
            margin: 0 auto;  
            border: 1px solid #1549eb;
            font-size: 30px;
            color:#1549eb;
            text-align: center;
            border-radius: 8px;
            overflow: hidden; 
        }
    }

    .tab-header-item {
        flex: 1;
        height: 64px;
        line-height: 64px;
        background-color: #fff;
        &.active {
            color: #fff;
            background-color:#1549eb;
        }
    }
    
    .rank-tab-body {
        width: 100%;
        overflow: hidden;
    }

    .rank-media {
        display: flex;
        padding: 20px;
        padding-left: 60px;
        font-size: 28px;
        color: #333;
        position: relative;
        align-items: center;
        &:before{
            display: block;
            content: '';
            width: 100%;
            height: 2px;
            background-color: #f3f3f3;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .order {
            width: 40px;
            height: 66px;
            position: absolute;
            top: 20px;
            left: 0;
            text-align: center;
            line-height: 66px;
        }
    }
    .media-object {
    
        width: 66px;
        height: 66px;
        overflow: hidden;
        margin-right: 20px;
        .img-avtar{
            vertical-align: middle;
        }
    }

    .media-body {
        flex: 1;
    }
    .media-heading { flex: 1; }
}

.rank-list-wrapper {
    height: 100%;
    padding: 0 15px 0 35px;
    background: #fff;
    overflow: auto;
}
</style>